<script setup>

//当前登录的用户信息
import router from "../router/index.js";
import MyIcon from "../components/MyIcon.vue";
import MyList from "../components/MyList.vue";
import {shallowRef} from "vue";
import {useDark} from "@vueuse/core";
import {useToggle} from "@vueuse/core";
import {ElNotification} from "element-plus";
import {MINIO_AVATAR} from "../const/index.js";
import {PROJECT_INFO, PROJECT_NAME, PROJECT_SKILL} from "../const/project.js";
import {LOCAL_RES} from "../util/index.js";
import {notYet} from "../util/index.js";

const loginUser = JSON.parse(sessionStorage.getItem('loginUser'));

/* =================用户菜单==================== */
//
let currentMenuIndex = shallowRef(router.currentRoute.value['path']);
//
const isCollapse = shallowRef(false);
//
const loginMenus = JSON.parse(sessionStorage.getItem('loginMenus'));

/* =====================项目信息==================== */
//
const projectInfoDrawer = shallowRef();

//
function openProjectInfoDrawer() {
  projectInfoDrawer.value = true;
}

/* =====================项目技术栈==================== */
//
const projectSkillDrawer = shallowRef();

//
function openProjectSkillDrawer() {
  projectSkillDrawer.value = true;
}

/* =====================系统日历==================== */
//
const calendarDrawer = shallowRef();
let calendarData = shallowRef(new Date());

//
function openCalendarDrawer() {
  calendarDrawer.value = true;
}

/* =====================系统通知==================== */
//
function notify() {
  ElNotification.info({
    title: '通知列表',
    message: '暂无通知消息',
    position: 'bottom-right',
  });
}

/* =====================路径跳转==================== */
//
function toPersonal() {
  router.push('/Personal');
}

//
function toPersonalUpdate() {
  router.push('/PersonalUpdate');
}

/* =====================退出登录==================== */
//
function logout() {
  router.push('/');
}

/* =====================暗黑模式==================== */
//
const currentTheme = shallowRef(localStorage.getItem('vueuse-color-scheme') === 'auto');
//
const toggleTheme = useToggle(useDark());
</script>

<template>

  <el-container class="main-body">

    <el-aside class="main-body-left"

              width="collapse"

              max-width="200px">

      <el-menu class="menus-menu el-menu-vertical-demo"

               unique-opened

               router

               :collapse="isCollapse"

               :default-active="currentMenuIndex">

        <el-image class="logo" :src="LOCAL_RES('../assets/image/RussellWestbrook.jpg')"/>

        <el-menu-item class="house-item"

                      index="/DashBoard"

                      title="回到后台项目首页">

          <my-icon icon="House" label="DashBoard"/>

        </el-menu-item>

        <el-sub-menu class="menus"

                     v-for="(menu, i) in loginMenus"

                     :key="menu['id']"

                     :index="i.toString()"

                     :title="menu['info']">

          <template #title>

            <my-icon :icon="menu['icon']" :label="menu['title']"/>

          </template>

          <el-menu-item class="sub-menus"

                        v-for="subMenu in menu['subMenus']"

                        :key="subMenu['id']"

                        :index="subMenu['url']"

                        :title="subMenu['info']">

            <my-icon :icon="subMenu['icon']" :label="subMenu['title']"/>

          </el-menu-item>

        </el-sub-menu>

      </el-menu>

    </el-aside>

    <el-container class="main-body-right">

      <el-header class="main-body-right-head">

        <el-row class="is-align-middle">

          <el-col class="fold-expand-col" :span="2">

            <el-radio-group v-model="isCollapse">

              <el-radio-button :label="!isCollapse">

                <my-icon :size="20" :icon="!isCollapse ? 'Fold' : 'Expand'"/>

              </el-radio-button>

            </el-radio-group>

          </el-col>

          <el-col class="project-name-col" :span="7">{{ PROJECT_NAME }}</el-col>

          <el-col class="operation-btn-col" :span="7" :offset="4">

            <el-divider direction="vertical"/>

            <el-button icon="search" title="全局搜索" size="small" round @click="notYet"/>

            <el-button icon="bell" title="系统通知" size="small" round @click="notify"/>

            <el-button icon="list" title="项目信息" size="small" round @click="openProjectInfoDrawer"/>

            <el-button icon="document" title="技术栈信息" size="small" round @click="openProjectSkillDrawer"/>

            <el-button icon="calendar" title="系统时间" size="small" round @click="openCalendarDrawer"/>

            <el-divider direction="vertical"/>

            <el-switch class="theme-switch"

                       title="开启暗黑模式"

                       inline-prompt

                       v-model="currentTheme"

                       :active-action-icon="'Moon'"

                       :inactive-action-icon="'Sunny'"

                       @change="toggleTheme"/>

            <el-divider direction="vertic al"/>

          </el-col>

          <el-col class="nickname-col"

                  :span="3"

                  v-if="loginUser['nickname']">

            {{ loginUser['nickname'] }}

          </el-col>

          <el-col class="avatar-col"

                  :span="1"

                  v-if="loginUser['avatar']">

            <el-dropdown trigger="click">

            <span class="el-dropdown-link">

              <el-avatar class="avatar" :size="45" :src="MINIO_AVATAR(loginUser['avatar'])"/>

            </span>

              <template #dropdown>

                <el-dropdown-menu>

                  <el-dropdown-item icon="InfoFilled" @click="toPersonal">

                    查看个人信息

                  </el-dropdown-item>

                  <el-dropdown-item icon="Edit" @click="toPersonalUpdate">

                    修改个人信息

                  </el-dropdown-item>

                  <el-dropdown-item icon="WarnTriangleFilled"

                                    @click="logout">

                    <el-text type="danger">退出登录</el-text>

                  </el-dropdown-item>

                </el-dropdown-menu>

              </template>

            </el-dropdown>

          </el-col>

        </el-row>

      </el-header>

      <el-main class="main-body-right-main">

        <router-view/>

      </el-main>

    </el-container>

  </el-container>

  <el-drawer class="calendar-drawer" title="当前时间" v-model="calendarDrawer" size="50%">

    <el-calendar v-model="calendarData"/>

  </el-drawer>

  <el-drawer class="project-info-drawer" v-model="projectInfoDrawer" size="70%">

    <my-list title="项目系统信息" :items="PROJECT_INFO" :column="2"/>

  </el-drawer>

  <el-drawer class="project-skill-drawer" v-model="projectSkillDrawer" size="50%">

    <my-list title="项目技术栈信息" :items="PROJECT_SKILL"/>

  </el-drawer>

</template>

<style scoped lang="scss">

.main-body-left {



  height: 100vh; // 高度

  border-right: 1px solid #cccccc; // 右边框



  .logo {

    margin: 10px; // 外边距

    border-radius: 10%; // 圆角

    box-shadow: 1px 1px 1px gray; // 阴影

  }



  .el-menu-vertical-demo:not(.el-menu--collapse) {

    width: 200px; // 宽度

    height: 100vh; // 高度

    letter-spacing: 2px; // 字间距

  }



  .el-icon {

    margin: 0 10px; // 上下外边距 左右外边距

  }

}



.main-body-right-head {



  .project-name-col {

    font-weight: bolder; // 加粗

    font-size: 1.5rem; // 字号倍率

  }



  .operation-btn-col {

    text-align: center; // 内容居中



    .theme-switch {

      --el-switch-on-color: #2C2C2C; // 选中时的颜色

      --el-switch-off-color: #F2F2F2; // 取消选择时的颜色

    }

  }



  .nickname-col {

    text-align: right; // 右对齐

    height: 50px; // 高度

    display: inline-block; // 内联块

    text-shadow: 2px 2px 2px gray; // 文字阴影

    line-height: 50px; // 行高

  }



  .avatar-col {

    text-align: right; // 右对齐

  }



  .avatar {

    margin: 10px; // 外边距

    outline: 1px solid #854040; // 轮廓

    border: 1px solid #854040; // 边框

  }

}

</style>